import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    Authorization: localStorage.getItem('Authorization') // 获取token
      ? localStorage.getItem('Authorization')
      : '',
    navList: [{ name: 'home', label: '首页' }], // 顶部的数据,首页这个数据一定要有
    IEversion: '',
    // 没确认的背景
    unconfirmedBG: '#FEFEA8',
    // 厂进没收货的背景
    notReceiveBG: '#D5EAFF',
    // 调货摘要的背景
    // transferCargoInfoBG: '#D5EAFF'
    transferCargoInfoBG: '#7fffd4',
    // 当前直营店店铺的数据
    currentStoreData: JSON.parse(localStorage.getItem('currentStoreData')) || {}
  },
  mutations: {
    changeLogin(state, user) {
      // 保存token到vuex
      state.Authorization = user.Authorization
      // token再保存到本地持久化
      localStorage.setItem('Authorization', user.Authorization)
    },
    addNav(state, obj) {
      // console.log(obj) // 点击子菜单的时候，触发这个函数，并且拿到要push进去top数组obj的修改顶部的top值
      // ..........暂时注释掉，没有发现异常
      for (const item of state.navList) {
        // 传过来的obj对象里面的lable是否等于navList里面的lable数组？
        if (item.label == obj.label) {
          if (
            obj.label == '厂商进货' ||
            obj.label == '厂商退货' ||
            obj.label == '客户进货' ||
            obj.label == '客户退货' ||
            obj.label == '客户销货'
          ) {
            item.path = obj.path // 这个遍历的目的是，重置遍历的key值，因为在遍历的时候，用了:key="item.name"
          }
          return
        }
      }
      // if(state.navList.indexOf(str) !== -1) return
      state.navList.push(obj) // 往顶部追加数组项，也就是直接添加obj
      // if (obj.label.indexOf("删单") == -1 && obj.label.indexOf("列印") == -1)
      //   this.commit("delDynamicPage");

      if (obj.label.indexOf('删单') == -1 && obj.label.indexOf('列印') == -1) {
        this.commit('delDynamicPage')
      }
      // ..........暂时注释掉，没有发现异常
      // 点击二级菜单，如果传过来的数据对象里面的label没有这两个字符串，那么久触发下面的delDynamicPage方法
    },
    // 当点击top顶部小图标的叉号的时候，遍历navList这个数组，并且在这个数组中，找到点击的那一项，然后删除
    minusNav(state, str) {
      let len = state.navList.length
      for (let i = 1; i < len; i++) {
        const e = state.navList[i]
        if (e.label == str) {
          state.navList.splice(i, 1)
          return
        }
      }
    },
    // 这是顶部最右侧的叉号小图标被点击的时候触发的函数
    clearTag(state, str) {
      // str是该页面路由中的name,传这个参数过来，目的是寻找navList数组项中name对比，然后拿到你所在tag的标签页，来保证你所在页面不能删除

      // 上一任写的
      // let index = 0; // 这个是自定义字段, 其实主要是为存符合条件的index数字
      // for (const i in state.navList) {
      //   // state.navList.hasOwnProperty(i) 目的是判断是否为空数组
      //   if (state.navList.hasOwnProperty(i)) {
      //     const element = state.navList[i]; // 取下标i的数组项
      //     if (element.name == str) {
      //       index = i;
      //       break; // 符合条件中断循环
      //     }
      //   }
      // }
      let index = 0
      for (var i = 0; i < state.navList.length; i++) {
        // console.log(++a); ++a 先加了再运算 ，a++ 先运算，后再加
        if (state.navList[i].name === str) {
          index = i
          break
        }
      }
      // 没有下面if(),点击top全部关闭叉号不管用
      if (index) {
        // 无论你所在哪一位，第一句都是从第一个开始删，删完你所在的前一位，第二句就是把所在后面的删掉
        // 1. 前面这一句保证删掉前面的，2. 后面的一句保证删掉后面的
        state.navList.splice(1, index - 1) // 假如index === 2 的时候，那么证明这个数组只要三个，那么从第二项看、开始删除，一直删到倒数第二位 （这种情况，是当用户，恰好处于最后一个tag页面的时候）
        state.navList.splice(2) // 不管你所处在哪一个tag标签，当执行完这句的时候 state.navList.splice(1, index - 1),你肯定已经在数组的1位了，那么state.navList.splice(2)就是从第二位开始删除，一直删到最后
      }
    },
    // 点击删除所在页面的时候，函数？？？？
    delDynamicPage(state) {
      let index = 0
      // console.log("我被触发了喔");
      for (const i in state.navList) {
        // 遍历这个数组，for in 遍历的拿到的是数组的索引，并且这个索引是一个字符串
        // state.navList.hasOwnProperty(i) 判断这个是否为空数组
        if (state.navList.hasOwnProperty(i)) {
          const e = state.navList[i] // 数组不是空的时候，把数组的每一项都取出来，然后看一下是否有‘删单’或者‘列印’
          if (e.label.indexOf('删单') != -1) {
            index = i
            state.navList.splice(index, 1) // 估计点击tag的小叉号的时候，也是会触发这个函数的
            break
          } else if (e.label.indexOf('列印') != -1) {
            index = i
            state.navList.splice(index, 1)
            break
          }
        }
      }
    },

    // 直营店不看首页，直接看店铺销售 这个vuex中顶部数据，如果是直营店的话，直接换这个数组,就是如果是直营店的话，那么直接让顶部的数组等于这个数组
    store(state) {
      state.navList = [{ name: 'store_sales_s', label: '店铺销售' }]
    },

    /* 
        保存当前直营店店铺的数据
    */
    keepCurrentStoreData(state, currentStoreData) {
      console.log('拿到数据了', currentStoreData)
      // 拿到当前直营店数据
      window.localStorage.setItem(
        'currentStoreData',
        JSON.stringify(currentStoreData)
      )
      state.currentStoreData = currentStoreData
    }
  },
  actions: {},
  modules: {},
  getters: {
    // getNavList: (state) => {
    //   return state.navList;
    // },
    // 修改成语法糖的形式，这里主要是对state中的数据进行加工
    getNavList(state) {
      return state.navList
    }
  }
})
